
<!-- 上线统计 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="" prop="searchType" style="width: 310px;">
                <el-select v-model="searchType" class="search-text" style="width:90px !important">
                    <el-option label="设备名称" :value="0"></el-option>
                    <el-option label="设备号" :value="1"></el-option>
                </el-select>
                <el-select v-model="searchInput" :clearable="true" filterable remote placeholder="请输入"
                    :remote-method="querySearchAsync" :loading="selectLoading" style="width: 214px;">
                    <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属公司" prop="companyId">
                <el-tree-select v-model="queryParams.companyId" placeholder="请选择所属公司" clearable :data="treeList"
                    :expand-on-click-node="false" :render-after-expand="false" @change="handleQuery" check-strictly
                    :props="{ label: 'label' }" node-key="id" filterable />
            </el-form-item>
            <el-form-item label="统计时间" style="width: 428px;">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),]" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['statisticalReportForm:onlineStatistics:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table highlight-current-row v-loading="loading" :data="tableList">
            <template v-for="v in tableItems">
                <el-table-column :label="v.name" align="left" :prop="v.prop" v-if="v.type == 'time'" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row[v.prop], '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="v.name" align="left" :prop="v.prop" v-else :width="v.width" />
            </template>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>
<script setup lang="ts" name="OnlineStatistics">
import dayjs from "dayjs"
import { reactive, toRefs, ref, getCurrentInstance } from "vue"
import { treeDept } from "../../api/system/dept";
import request from '../../utils/request'
const loading = ref(false);
const selectLoading = ref(false);
const searchType = ref(0);
const searchInput = ref('');
const tableList = ref([]);
const searchOptions = ref([]);
const treeList = ref([]);
const dateRange = ref([dayjs(new Date()).add(-1, "days").format("YYYY-MM-DD 00:00:00"), dayjs(new Date()).format("YYYY-MM-DD 23:59:59")]);
const { proxy } = getCurrentInstance();
//@ts-ignore
const parseTime = proxy.parseTime;
const tableItems = ref([
    { name: '设备名称', prop: "numberPlate" },
    { name: '设备号', prop: "dvo" },
    { name: '所属公司', prop: "companyName", width: 500 },
    { name: '上线日期', prop: "day", type: "time" },
    { name: '开始时间', prop: "startTime" },
    { name: '结束时间', prop: "endTime" },
    { name: '上线时长', prop: "onlineMinutes" },
]);
const total = ref(0);
const showSearch = ref(true);
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 15,
        companyId: '',
    },
});
treeDept().then(res => {
    treeList.value = res.data
})
const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    //@ts-ignore
    proxy.resetForm("queryRef");
    searchInput.value = null;
    dateRange.value = [dayjs(new Date()).add(-1, "days").format("YYYY-MM-DD 00:00:00"), dayjs(new Date()).format("YYYY-MM-DD 23:59:59")];
    handleQuery();
}
/** 查询列表 */
function getList() {
    loading.value = true;
    request({
        url: '/comlbs/reportStatistics/deviceOnline/list',
        method: 'post',
        //@ts-ignore
        params: { ...proxy.addDateRange2(queryParams.value, dateRange.value), dvo: searchInput.value }
    }).then(({ data }: any) => {
        tableList.value = data.list;
        total.value = data.total;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}

/** 导出按钮操作 */
function handleExport() {
    //@ts-ignore
    proxy.download('comlbs/reportStatistics/deviceOnline/listExport',
        //@ts-ignore
        { ...proxy.addDateRange2(queryParams.value, dateRange.value), dvo: searchInput.value }
        , `上线统计_${dayjs(new Date()).format("YYYY-MM-DD_HH:mm:ss")}.xlsx`)
}

// 远程查询
function querySearchAsync(queryStr) {
    if (queryStr == '' || queryStr.length < 3) {
        searchOptions.value = [];
        return
    }
    selectLoading.value = true;
    if (searchType.value === 0) {
        // 设备名称模糊查询
        request({
            url: '/comlbs/vehicleManagement/queryDeviceByPlate',
            method: 'get',
            params: {
                numberPlate: queryStr
            }
        }).then(res => {
            searchOptions.value = res.data.map(v => {
                return {
                    value: v.deviceId,
                    label: v.numberPlate,
                }
            })
            selectLoading.value = false;
        })
    } else if (searchType.value === 1) {
        // 设备号模糊查询
        request({
            url: '/comlbs/equipmentManagement/queryDeviceIdAndNumberPlateByDevice',
            method: 'get',
            params: {
                deviceId: queryStr
            }
        }).then(res => {
            searchOptions.value = res.data.map(v => {
                return {
                    value: v.deviceId,
                    label: v.deviceId,
                }
            })
            selectLoading.value = false
        })
    }
}

getList();
</script>
<style lang='less' scoped></style>